<template>
  <div class="p-20">
    <el-alert type="success" :closable="false">
      <VolumeNotice /> 部分示例图表为echarts图表，<a
        class="link"
        href="https://echarts.apache.org/examples/zh/index.html"
        target="_blank"
        >点我查看更多图表功能<Link />
      </a>
    </el-alert>
    <ul class="mt-20">
      <li v-for="item in charts" class="tile-card p-10">
        <div class="header">
          <span>{{ item.label }}</span>
          <span style="font-size: 12px" v-if="item.id && item.id === 'tags'"
            >（
            <a class="link" href="https://www.goat1000.com/tagcanvas-options.php" target="_blank">
              点我查看TagCanvas配置参数<Link /></a
            >）</span
          >
          <span style="font-size: 12px" v-if="item.id && item.id === 'wordcloud'"
            >（
            <a class="link" href="https://ecomfe.github.io/echarts-wordcloud/" target="_blank">
              点我查看echarts-wordcloud配置参数<Link /></a
            >）</span
          >
        </div>
        <component :is="item.component"></component>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { VolumeNotice, Link } from '@icon-park/vue-next';
import { line, bar, pie, rose, scatter, wordcloud, sunburst, funnel, text, tags } from './components/charts-components';

const charts = [
  {
    label: '折线图',
    component: line
  },
  {
    label: '柱状图',
    component: bar
  },
  {
    label: '饼图',
    component: pie
  },
  {
    label: '玫瑰图',
    component: rose
  },
  {
    label: '散点图',
    component: scatter
  },
  {
    label: '词云图',
    id: 'wordcloud',
    component: wordcloud
  },
  {
    label: '旭日图',
    component: sunburst
  },
  {
    label: '漏斗图',
    component: funnel
  },
  {
    label: '文字描边动画',
    component: text
  },
  {
    label: '动态词云图',
    id: 'tags',
    component: tags
  }
];
</script>

<style lang="scss" scoped>
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  justify-content: center;

  li {
    box-shadow: var(--admin-shadow);

    .header {
      line-height: 30px;
      border-bottom: 1px solid #ececec;
    }

    .chart-main {
      width: 100%;
      height: 240px;
    }
  }
}
</style>
